<template>
  <div class="checkIn-container">
    <TitleBar title="条件筛选"></TitleBar>
    <ConditionFilter
      @headleSubmit="headleSubmit"
      :page="pageRef"
      @headleEmpty = "headleEmpty"
      ref="comditionDomRef"
    >
  </ConditionFilter>
    <TitleBar title="入住记录"></TitleBar>
    <ChenkInList :CheckInRecordData="CheckInRecordDataRef" :total="totalRef" @chandleCurrent="chandleCurrent" :isLoading="isLoadingRef"></ChenkInList>
  </div>
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue";
import ConditionFilter from "./components/ConditionFilter.vue"
import ChenkInList from "./components/CheckInList.vue"
import { getCheckInRecord } from "@/api/student.js";
import { ref, watchEffect } from "vue";
const totalRef = ref();
const CheckInRecordDataRef = ref()
const pageRef = ref(1);
const keywordRef = ref()
const isLoadingRef= ref(false)
// 根据条件获取远程数据
const headleSubmit = (data) => {
  pageRef.value = 1
  keywordRef.value = data
}
// 清空条件
const headleEmpty = () =>{
  pageRef.value = 1
  keywordRef.value = ""
}
// 改变页码
const chandleCurrent =(data) =>{
  pageRef.value = data
}

watchEffect(async () => {
  isLoadingRef.value = true;
  const res = await getCheckInRecord({
    page: pageRef.value,
    limit: 5,
    keyword: keywordRef.value,
  });
  CheckInRecordDataRef.value = res.data.rows;
  totalRef.value = res.data.total;
  isLoadingRef.value = false;
},{
  deep: true
});
</script>

<style lang="less" scoped>

</style>